<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../Bootstrap/js/vue.js"></script>
    <script src="../Bootstrap/js/vue-router.js"></script>
</head>
<body>
<div id="app">
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
</div>

<template id="self-main">
    <div>
        <h3>书籍</h3>
        <!-- 补全子路由路径 -->
        <router-link to="/main/list">教育</router-link>
        <!-- 路由匹配到的组件所使用的模板将渲染在这里 -->
        <router-view></router-view>
        <!--组件匹配的模板直接渲染-->
        <!--<user-list></user-list>-->
    </div>
</template>
<script>
    var selfMain = Vue.component('self-main', {
        template: '#self-main',
    });
</script>

<template id="user-list">
    <div>
        <ul>
            <li>
                <router-link to="/main/list/list1">第1条项目</router-link>
            </li>
            <li>
                <router-link to="/main/list/list2">第2条项目</router-link>
            </li>
        </ul>
    </div>
</template>
<script>
    var userList = Vue.component('user-list', {
        template: '#user-list'
    });
</script>

<!-- 用户1 -->
<template id="user-list1">
    <div>
        <div>
            <p>User的详细页面</p>
            <p>传过来的用户编号<strong>1</strong></p>
        </div>
    </div>
</template>
<script>
    var userList1 = Vue.component('user-list1', {
        template: '#user-list1'
    });
</script>
<!-- 用户2 -->
<template id="user-list2">
    <div>
        <div>
            <p>User的详细页面</p>
            <p>传过来的用户编号<strong>2</strong></p>
        </div>
    </div>
</template>
<script>
    var userList2 = Vue.component('user-list2', {
        template: '#user-list2'
    });
</script>

<script>
    var router = new VueRouter({
        routes: [
            {
                path: '/',
                redirect() {
                    return '/main';
                }
            },
            {
                path: '/main',
                component: selfMain,
                // 子路由，和routes一样，不加路径的/
                children: [
                    {
                        path: 'list', // /main/list
                        name: '用户列表',
                        component: userList
                    },

                    {
                        path: 'list/list1', // /main/list/list1
                        name: '第一条项目',
                        component: userList1
                    },
                    {
                        path: 'list/list2', // /main/list/list2
                        name: '第二条项目',
                        component: userList2
                    }
                ]
            },

        ]
    });
    var vue = new Vue({
        el: '#app',
        router
    });
/*
* 路由路径——组件——组件所用的模板——模板里面还有路由路径时还可以再跳
* */
/* 
    组件不交给路由管理时：
    声子(声明组件)--挂子(将组件通过component挂载)--用子( <组件名 /> )
    组件交给路由管理时：
    声子(声明组件)--挂子(将组件挂载在某一路由上)--用子( 用<router-view/>渲染 )--激活(router-link)

    组要注意，使用模块化开发时，需要导出导入组件才能使用。
*/
</script>
</body>
</html>
